<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:300px;height:300px;background-color: #ccc;}
        .xbox{width:100px;height:100px;background-color: red;position: absolute;left:100px;top:50px;}
    </style>
</head>
<body>
    <span>a</span>
    <div class="box" title="这是div的title" id="cont" abc="10" qwe="20" asd="30">
        <span>1</span>
        hello
        <!-- 注释 -->
        <span>2</span>
        <div class="msg">
            <div class="xbox"></div>
        </div>
    </div>
    <em>b</em>
</body>
<script>

    var obox = document.getElementsByClassName("box")[0];
    console.log(obox);

    // 所有子节点（包括文本，注释，元素）
    console.log(obox.childNodes);
    // 第一个子节点
    console.log(obox.firstChild);
    // 最后一个子节点
    console.log(obox.lastChild);
    // 上一个兄弟节点
    console.log(obox.previousSibling);
    // 下一个兄弟节点
    console.log(obox.nextSibling);

    // ===========

    // 元素节点选择器-补充
    // 获取当前元素的包含块
    var oxbox = document.querySelector(".xbox")
    console.log(oxbox.offsetParent);
    // 基于定位
    // 包含块：相对于当前元素最近的一个具有定位的父元素，如果没有这样的父元素，是body

</script>
</html>